@font-face {
    font-family: CircularSpotifyTxT_Bold;
    font-weight: 700;
    src: url(./asset/font/CircularSpotifyTxT-Bold.woff2) format("truetype");
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: CircularSpotifyTxT_Book;
    font-weight: 700;
    src: url(./asset/font/CircularSpotifyTxT-Book.woff2) format("truetype");
    text-rendering: optimizeLegibility;
}
* {
    padding: 0;
    margin: 0;
}

.swiper-content {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    padding: 1.75rem 3.75rem;
    box-sizing: border-box;
    .title {
        margin-bottom: 2rem;
        font-size: 1.3rem;
        z-index: 2;
        position: relative;
        h1 {
            font-family: CircularSpotifyTxT_Bold;
        }
        span {
            font-family: CircularSpotifyTxT_Book;
        }
    }
    .swiper {
        overflow: visible !important;
        .swiper-slide {
            position: relative;
            height: 80vh;
            &:hover{
                z-index: -1;
            }
            &:nth-child(3n + 1) {
                width: 36rem !important;
                height: 45rem;
                .spotlight-card {
                    &:hover ~ .flower-wrapper {
                        .flower {
                            transform: scale(6);
                        }
                    }
                }
            }
            &:nth-child(3n + 2) {
                width: 24rem !important;
                height: 27rem;
                .spotlight-card {
                    &:hover ~ .flower-wrapper {
                        .flower {
                            transform: scale(4);
                        }
                    }
                }
            }
            &:nth-child(3n) {
                width: 30rem !important;
                height: 30rem;
                .spotlight-card {
                    &:hover ~ .flower-wrapper {
                        .flower {
                            transform: scale(5);
                        }
                    }
                }
            }
            .flower-wrapper {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                z-index: -2;
                .flower {
                    width: 10vw;
                    transition: 1s;
                    transition-timing-function: cubic-bezier(0.42, 0, 0.05, 1.01);
                    &:hover:not(:active) {
                        transition-duration: 0.4s;
                    }
                    svg {
                        width: 120vmin;
                        height: 120vmin;
                        overflow: hidden;
                    }
                }
            }
            .spotlight-card {
                width: 100%;
                height: 100%;
                position: relative;
                cursor: pointer;
                &:hover {
                    .sketch {
                        opacity: 1;
                        p {
                            transform: translateY(0px);
                        }
                    }
                }
                img {
                    width: 100%;
                    height: 100%;
                }
                .sketch {
                    width: calc(100% - 1.5rem);
                    max-height: calc(100% - 1.5rem);
                    padding: 1.5rem;
                    position: absolute;
                    left: 0.75rem;
                    bottom: 0.75rem;
                    background-color: #000;
                    color: #fff;
                    font-size: 1.4rem;
                    font-family: CircularSpotifyTxT_Book;
                    opacity: 0;
                    transition: 0.4s;
                    box-sizing: border-box;
                    p {
                        transition: 0.4s;
                        transform: translateY(20px);
                    }
                }

                .introduce {
                    color: #000;
                    margin-top: 10px;
                    font-size: 1.4rem;
                    font-weight: 900;
                    font-family: CircularSpotifyTxT_Bold;
                }
            }
        }
    }
}

@media screen and (min-width: 1020px) {
    .swiper-slide {
        position: relative;
        height: 80vh;
        &:hover{
            z-index: -1;
        }
        &:nth-child(3n + 1) {
            width: 23rem !important;
            height: 27rem;
            .spotlight-card {
                &:hover ~ .flower-wrapper {
                    .flower {
                        transform: scale(6);
                    }
                }
            }
        }
        &:nth-child(3n + 2) {
            width: 16rem !important;
            height: 20rem;
            .spotlight-card {
                &:hover ~ .flower-wrapper {
                    .flower {
                        transform: scale(4);
                    }
                }
            }
        }
        &:nth-child(3n) {
            width: 19rem !important;
            height: 23rem;
            .spotlight-card {
                &:hover ~ .flower-wrapper {
                    .flower {
                        transform: scale(5);
                    }
                }
            }
        }
    }
}
